<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="addModel"
    class="addForm"
    label-position="left"
    label-width="110px"
  >
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in firstItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in secondItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in thirdItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in fourthItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col
          v-for="item in fifthItemList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="addModel[item.prop]"
              :placeholder="item.placeholder"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="dynamic-item">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-row :gutter="15">
            <el-col
              v-for="item in sexItemList"
              :key="item.prop"
              :span="item.span"
            >
              <el-form-item :label="item.label" :prop="item.prop">
                <!-- 文本框 -->
                <el-input
                  v-if="item.type === 'Input'"
                  v-model.trim="addModel[item.prop]"
                  :placeholder="item.placeholder"
                />
                <!-- 下拉框 -->
                <el-select
                  v-if="item.type === 'Select'"
                  v-model="addModel[item.prop]"
                  style="width:100%"
                >
                  <el-option
                    v-for="op in item.options"
                    :key="op.value"
                    :label="op.label"
                    :value="op.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <!-- 上传图像 -->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="addModel.imageUrl"
              :src="addModel[item.prop]"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
    </div>

    <el-form-item
      v-for="item in seventhList"
      :key="item.type"
      :label="item.label"
      :prop="item.prop"
      class="dynamic-item"
    >
      <!-- 民族 -->
      <Nation v-if="item.type === 'Nation'" :model="addModel" />
      <!-- 血型 -->
      <Blood v-if="item.type === 'Blood'" :model="addModel" />
      <!-- 文化程度 -->
      <Culture v-if="item.type === 'Culture'" :model="addModel" />
      <!-- 职业 -->
      <Occupation v-if="item.type === 'Occupation'" :model="addModel" />
      <!-- 婚姻 -->
      <Marriage v-if="item.type === 'Marriage'" :model="addModel" />
      <!-- 医疗费用支付方式 -->
      <MedicalBill v-if="item.type === 'MedicalBill'" :model="addModel" />
      <!-- 药物过敏史 -->
      <Allergy v-if="item.type === 'Allergy'" :model="addModel" />
      <!-- 暴露史 -->
      <Expose v-if="item.type === 'Expose'" :model="addModel" />

      <!-- 疾病 -->
      <Disease v-if="item.type === 'Disease'" :model="addModel" />
      <!-- 手术 -->
      <Operation v-if="item.type === 'Operation'" :model="addModel" />
      <!-- 外伤 -->
      <Trauma v-if="item.type === 'Trauma'" :model="addModel" />
      <!-- 输血 -->
      <BloodTransfusion
        v-if="item.type === 'BloodTransfusion'"
        :model="addModel"
      />

      <!-- 父亲 -->
      <Father v-if="item.type === 'Father'" :model="addModel" />
      <!-- 母亲 -->
      <Mother v-if="item.type === 'Mother'" :model="addModel" />
      <!-- 兄弟姐妹 -->
      <Brothers v-if="item.type === 'Brothers'" :model="addModel" />
      <!-- 子女 -->
      <Children v-if="item.type === 'Children'" :model="addModel" />

      <!-- 遗传病史 -->
      <Inheritance v-if="item.type === 'Inheritance'" :model="addModel" />
      <!-- 残疾情况 -->
      <Disability v-if="item.type === 'Disability'" :model="addModel" />
      <!-- 与户主关系 -->
      <Relationship v-if="item.type === 'Relationship'" :model="addModel" />

      <!-- 厨房 -->
      <Kitchen v-if="item.type === 'Kitchen'" :model="addModel" />
      <!-- 燃料类型 -->
      <Fuel v-if="item.type === 'Fuel'" :model="addModel" />
      <!-- 饮水 -->
      <Water v-if="item.type === 'Water'" :model="addModel" />
      <!-- 厕所 -->
      <Toilet v-if="item.type === 'Toilet'" :model="addModel" />
      <!-- 禽畜栏 -->
      <Poultry v-if="item.type === 'Poultry'" :model="addModel" />
    </el-form-item>
  </el-form>
</template>

<script>
import Nation from "@/components/CommonForm/form-item/Nation.vue"
import Blood from "@/components/CommonForm/form-item/Blood.vue"
import Culture from "@/components/CommonForm/form-item/Culture.vue"
import Occupation from "@/components/CommonForm/form-item/Culture.vue"
import Marriage from "@/components/CommonForm/form-item/Marriage.vue"
import MedicalBill from "@/components/CommonForm/form-item/MedicalBill.vue"
import Allergy from "@/components/CommonForm/form-item/Allergy.vue"
import Expose from "@/components/CommonForm/form-item/Expose.vue"

import Disease from "@/components/CommonForm/form-item/Disease.vue"
import Operation from "@/components/CommonForm/form-item/Operation.vue"
import Trauma from "@/components/CommonForm/form-item/Trauma.vue"
import BloodTransfusion from "@/components/CommonForm/form-item/BloodTransfusion.vue"

import Father from "@/components/CommonForm/form-item/Father.vue"
import Mother from "@/components/CommonForm/form-item/Mother.vue"
import Brothers from "@/components/CommonForm/form-item/Brothers.vue"
import Children from "@/components/CommonForm/form-item/Children.vue"

import Inheritance from "@/components/CommonForm/form-item/Inheritance.vue"
import Disability from "@/components/CommonForm/form-item/Disability.vue"
import Relationship from "@/components/CommonForm/form-item/Relationship.vue"

import Kitchen from "@/components/CommonForm/form-item/Kitchen.vue"
import Fuel from "@/components/CommonForm/form-item/Fuel.vue"
import Water from "@/components/CommonForm/form-item/Water.vue"
import Toilet from "@/components/CommonForm/form-item/Toilet.vue"
import Poultry from "@/components/CommonForm/form-item/Poultry.vue"
// 加载模拟数据
import { sexs, liveType, helpPoor } from "@/simdata/healthData.js"
export default {
  components: {
    Nation,
    Blood,
    Culture,
    Occupation,
    Marriage,
    MedicalBill,
    Allergy,
    Expose,

    Disease,
    Operation,
    Trauma,
    BloodTransfusion,
    Father,
    Mother,
    Brothers,
    Children,
    Inheritance,
    Disability,
    Relationship,
    Kitchen,
    Fuel,
    Water,
    Toilet,
    Poultry
  },
  data() {
    return {
      // 新增的字段
      addModel: {
        detailedAddress: "",
        nowAddress: "",
        HouseNumber: "",
        createDate: "",
        residence: "",
        residenceHouseNumber: "",
        organ: "",
        creatDoctor: "",
        responsibleDoctor: "",
        number: "",
        enterName: "",
        administerOrgan: "",
        enterDate: "",
        editDate: "",
        // 第二页字段
        imageUrl: "",
        nationList: [], // 民族
        nationValue: "",
        bloodList: [], // 血型
        bloodOtherList: [], // 其他血型
        cultureList: [], // 文化程度
        occupationList: [], // 职业
        marriageList: [], // 婚姻
        medicalBillList: [], // 医疗费用支付方式
        medicalBillValue: "",
        allergyList: [], // 药物过敏史
        allergyValue: "",
        exposeList: [], // 暴露史
        // 第三段
        diseaseList: [], // 疾病
        hypertensionDate: "", // 高血压时间
        diabetesDate: "", // 糖尿病时间
        coronaryDate: "", // 冠心病时间
        manxinDate: "", // 慢性阻塞性肺疾病
        tumourDate: "", // 肿瘤时间
        strokeDate: "", // 脑卒时间
        mentalDate: "", // 严重精神时间
        tuberculosisDate: "", // 结核时间
        pneumoniaDate: "", // 肺炎时间
        legalDate: "", // 其他法定时间
        occupationDate: "", // 职业病时间
        otherDate: "", // 其他确诊时间
        diseaseValue: "", // 其他

        OperationList: [], // 手术
        operationName: "",
        operationDate: "",

        traumaList: [], // 外伤
        traumaName: "",
        traumaDate: "",

        BloodTransfusionList: [], // 输血
        BloodTransfusionName: "",
        BloodTransfusionDate: "",
        // 第五段
        fatherList: [],
        fatherValue: "",
        motherList: [],
        motherValue: "",
        brothersList: [],
        brothersValue: "",
        childrenList: [],
        childrenValue: "",

        inheritanceList: [],
        inheritanceValue: "",
        disabilityList: [],
        disabilityValue: "",
        relationshipList: [],
        relationshipValue: "",

        kitchenList: [],
        fuelList: [],
        waterList: [],
        toiletList: [],
        poultryList: []
      },
      rules: {
        detailedAddress: [
          { required: true, message: "请输入家庭地址", trigger: "blur" }
        ],
        nowAddress: [
          { required: true, message: "请输入现住地址", trigger: "blur" }
        ],
        createDate: [
          { required: true, message: "请输入建档时间", trigger: "blur" }
        ],
        residence: [
          { required: true, message: "请输入户籍地址", trigger: "blur" }
        ],
        organ: [{ required: true, message: "请输入建档机构", trigger: "blur" }],
        creatDoctor: [
          { required: true, message: "请输入建档医生", trigger: "blur" }
        ],
        responsibleDoctor: [
          { required: true, message: "请输入责任医生", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        birthdata: [
          { required: true, message: "请选择出生日期", trigger: "blur" }
        ],
        poor: [{ required: true, message: "请选择精准扶贫", trigger: "blur" }],
        identityNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        phonenumber: [
          { required: true, message: "请输入本人电话", trigger: "blur" }
        ],
        live: [{ required: true, message: "请选择常住类型", trigger: "blur" }],
        nationList: [
          { required: true, message: "请选择民族", trigger: "change" }
        ],
        cultureList: [
          { required: true, message: "请选择文化程度", trigger: "change" }
        ],
        occupationList: [
          { required: true, message: "请选择职业", trigger: "change" }
        ],
        marriageList: [
          { required: true, message: "请选择婚姻状况", trigger: "change" }
        ],
        relationshipList: [
          { required: true, message: "请选择入户主关系", trigger: "change" }
        ]
      },
      // 配置label项
      firstItemList: [
        {
          type: "Input",
          label: "家\u2002庭\u2003住\u2002址",
          prop: "detailedAddress",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "现\u2002住\u2003地\u2002址",
          prop: "nowAddress",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "现住地址门牌号",
          prop: "HouseNumber",
          disabled: false,
          placeholder: "",
          span: 6
        }
      ],
      secondItemList: [
        {
          type: "Input",
          label: "建\u2002档\u2003时\u2002间",
          prop: "createDate",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "户\u2002籍\u2003地\u2002址",
          prop: "residence",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "户籍地址门牌号",
          prop: "residenceHouseNumber",
          disabled: false,
          placeholder: "",
          span: 6
        }
      ],
      thirdItemList: [
        {
          type: "Input",
          label: "建\u2002档\u2003机\u2002构",
          prop: "organ",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "建\u2002档\u2003医\u2002生",
          prop: "creatDoctor",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "责\u2002任\u2003医\u2002生",
          prop: "responsibleDoctor",
          disabled: false,
          placeholder: "",
          span: 6
        }
      ],
      fourthItemList: [
        {
          type: "Input",
          label: "家\u2002庭\u2003编\u2002号",
          prop: "number",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "录\u2002入\u2003人\u2002员",
          prop: "enterName",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "管\u2002辖\u2003机\u2002构",
          prop: "administerOrgan",
          disabled: false,
          placeholder: "",
          span: 6
        }
      ],
      fifthItemList: [
        {
          type: "Input",
          label: "录\u2002入\u2003时\u2002间",
          prop: "enterDate",
          disabled: false,
          placeholder: "",
          span: 8
        },
        {
          type: "Input",
          label: "修\u2002改\u2003时\u2002间",
          prop: "editDate",
          disabled: false,
          placeholder: "",
          span: 8
        }
      ],
      sexItemList: [
        {
          type: "Input",
          label: "姓\u3000\u3000\u3000\u3000名",
          prop: "name",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "居民健康档案号",
          prop: "healthNum",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "医\u3000保\u3000号",
          prop: "medicalNum",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "编\u3000\u3000\u3000\u3000号",
          prop: "idNum",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Select",
          label: "性\u3000\u3000\u3000\u3000别",
          prop: "sex",
          options: sexs,
          placeholder: "请选择...",
          span: 12
        },
        {
          type: "Input",
          label: "出\u2002生\u2002日\u2002期",
          prop: "birthdata",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Select",
          label: "精\u2002准\u2002扶\u2002贫",
          prop: "poor",
          options: helpPoor,
          placeholder: "请选择...",
          span: 12
        },
        {
          type: "Input",
          label: "身\u2002份\u2002证\u2002号",
          prop: "identityNumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "工\u2002作\u2002单\u2002位",
          prop: "workAddress",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "本\u2002人\u2002电\u2002话",
          prop: "phonenumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "联系人姓名",
          prop: "linkName",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Input",
          label: "联系人电话",
          prop: "linkNumber",
          disabled: false,
          placeholder: "",
          span: 12
        },
        {
          type: "Select",
          label: "常\u2002驻\u2002类\u2002型",
          prop: "live",
          options: liveType,
          placeholder: "请选择...",
          span: 12
        }
      ],
      seventhList: [
        {
          type: "Nation",
          label: "民\u3000\u3000\u3000\u3000族",
          span: 24,
          prop: "nationList"
        },
        {
          type: "Blood",
          label: "血\u3000\u3000\u3000\u3000型",
          span: 24
        },
        {
          type: "Culture",
          label: "文\u2002化\u2002程\u2002度",
          span: 24,
          prop: "cultureList"
        },
        {
          type: "Occupation",
          label: "职\u3000\u3000\u3000\u3000业",
          span: 24,
          prop: "occupationList"
        },
        {
          type: "Marriage",
          label: "婚\u2002姻\u2002状\u2002态",
          span: 24,
          prop: "marriageList"
        },
        {
          type: "MedicalBill",
          label: "医疗费用支付方式",
          span: 24
        },
        {
          type: "Allergy",
          label: "药物过敏史",
          span: 24
        },
        {
          type: "Expose",
          label: "暴\u2002露\u2002史",
          span: 24
        },
        {
          type: "Disease",
          label: "疾\u3000\u3000\u3000\u3000病",
          span: 24
        },
        {
          type: "Operation",
          label: "手\u3000\u3000\u3000\u3000术",
          span: 24
        },
        {
          type: "Trauma",
          label: "外\u3000\u3000\u3000\u3000伤",
          span: 24
        },
        {
          type: "BloodTransfusion",
          label: "输\u3000\u3000\u3000\u3000血",
          span: 24
        },
        {
          type: "Father",
          label: "父\u3000\u3000\u3000\u3000亲",
          span: 24
        },
        {
          type: "Mother",
          label: "母\u3000\u3000\u3000\u3000亲",
          span: 24
        },
        {
          type: "Brothers",
          label: "兄\u2002弟\u2002姐\u2002妹",
          span: 24
        },
        {
          type: "Children",
          label: "子\u3000\u3000\u3000\u3000女",
          span: 24
        },
        {
          type: "Inheritance",
          label: "遗\u2002传\u2002病\u2002史",
          span: 24
        },
        {
          type: "Disability",
          label: "残\u2002疾\u2002情\u2002况",
          span: 24
        },
        {
          type: "Relationship",
          label: "与户主关系",
          span: 24,
          prop: "relationshipList"
        },
        {
          type: "Kitchen",
          label: "厨房排风设施",
          span: 24
        },
        {
          type: "Fuel",
          label: "燃\u2002料\u2002\u2002类\u2002型",
          span: 24
        },
        {
          type: "Water",
          label: "饮\u3000\u3000\u3000\u3000水",
          span: 24
        },
        {
          type: "Toilet",
          label: "厕\u3000\u3000\u3000\u3000所",
          span: 24
        },
        {
          type: "Poultry",
          label: "禽\u3000畜\u3000栏",
          span: 24
        }
      ]
    }
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs["ruleForm"].resetFields()
      })
    },
    // 点击确定提交
    submitHandle() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          console.log("调用aip接口")
        } else {
          return false
        }
      })
    },
    // 上传图像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss" scoped>
.addForm {
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #5351f7;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 60%;
    margin-left: 110px;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 256px;
    line-height: 256px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>
